<style lang="scss">
	@import '@/assets/css/variable';
	.zixundetail {
		// width: 100%;
		background-color: $main-bgc-white;
		min-height: 100%;
		font-size: 1.2rem;
		overflow-y: scroll;
		box-sizing: border-box;
		// flex:1;
		position: absolute;
		left: 0;
		right: 0;
		height: 100%;
		padding: 1.6rem;
		.titleLine{
			display: flex;
			justify-content: space-between;
			.title{
				flex: 1;
				font-size: 1.8rem;
				color: #191F25;
			}
			.collect{
				flex: 0 0 5rem;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: right;
				.box{
				  flex: 0 0 3.6rem;
				  display: flex;
				  flex-direction: column;
				  align-items: center;
				  .icon{
					   width: 2rem;
					  img{
						  width: 2rem;
					  }
				  }
				  .text{
					  font-size: 1.3rem;
					  color: $color3;
				  }
				}
			}
		}
		.infoLine{
			height: 4rem;
			line-height: 4rem;
			border-bottom: 1px solid #f7f7f7;
			color: $color3;
			display: flex;
			align-items: center;
		}
		.contentLine{
			padding: 1rem 0;
			color: $color2;
			font-size: 1.3rem;
			letter-spacing: 1px;
		}
	}
/* .edit_container,
.quill-editor {
  height: 50px;
} */
</style>
<template>
	<div class="zixundetail">
		<div class="titleLine">
			<div class="title">
				{{zixunItem.name}}
			</div>
			<div class="collect">
				<div class="box">
					<span class="icon" @click="CollectH5Saves()">
						<img v-if="collect==false" src="../../assets/img/star_unactive.svg" alt="">
						<img v-else src="../../assets/img/star_active.svg" alt="">
					</span>
					<span class="text">
						收藏
					</span>
				</div>
			</div>
		</div>
		<div class="infoLine">
			<van-icon name="eye-o" size="16"/>
			<span class="margL-s">{{zixunItem.read}}</span>
			<span class="margL-l">{{zixunItem.createtime}}</span>
		</div>
		<div class="contentLine ql-editor" v-html="zixunItem.introduction"></div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import {Toast} from 'vant'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "zixundetail",
		mixins: [myMixins],
		components: {
			
		},
		data() {
			return {
				zixunItem:{
					name:'',
					read:'',
					createtime:'',
					introduction:''
				},
				collect:''
			}
		},
		created() {
			const _this = this;
			// this.getCode()
		},
		mounted() {
			// document.title = '活动管理'
			// this.zixunItem = this.$store.state.zixunItem
			this.ArticleItem()
			this.CollectH5Items()
		},
		methods: {
			ArticleItem() {
				const _this = this;
				let params = {
					id: this.$route.query.id,
				}
				_this.$request.ArticleItem(params).then(res => {
					if(res.ret==200){
						this.zixunItem = res.data
						this.$forceUpdate()
					}
				})
			},
			CollectH5Items() {
				const _this = this;
				let params = {
					article_id: this.$route.query.id,
					openid:this.$store.state.openid || localStorage.getItem('openid'),
					campus_id:JSON.parse(localStorage.getItem('selectedCampus')).id
				}
				_this.$request.CollectH5Items(params).then(res => {
					if(res.ret==200){
						this.collect = res.data
					}
				})
			},
			CollectH5Saves() {
				const _this = this;
				let params = {
					article_id: this.$route.query.id,
					openid:this.$store.state.openid || localStorage.getItem('openid'),
					campus_id:JSON.parse(localStorage.getItem('selectedCampus')).id
				}
				console.log("CollectH5Saves",params)
				_this.$request.CollectH5Saves(params).then(res => {
					if(res.ret==200){
						Toast('操作成功')
						_this.CollectH5Items()
					}
				})
			},
			getActivityPage() {
				const _this = this;
				let params = {
					status: 2,
					pageNo: _this.pageNo,
					pageSize: _this.pageSize
				}
				_this.$request.getActivityPage(params).then(res => {
					let data = res.data.data
					_this.list.push(...data)
					console.log(_this.list.length)
					if (_this.pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize))) {
						_this.finished = true;
					} else {
						_this.pageNo++
					}
					// this.$store.commit('setCaseList', this.caseList);
				}).finally(() => {
					console.log('finally')
				})
			},
		}
	};
</script>
